import { fetchLiveList } from "api/live";
import { useRouter } from "next/router";
import React, { useState } from "react";

interface Props {
  name: string;
}

interface IRoom {
  roomId: string;
  roomName: string;
  srs?: { streamurl: string };
  coverImg: string;
}

const Home: React.FC<Props> = () => {
  const router = useRouter()
  const [liveRoomList, setLiveRoomList]: [
    IRoom[],
    React.Dispatch<React.SetStateAction<IRoom[]>>
  ] = useState<IRoom[]>([]);

  const [currentLiveRoom, setCurrenRoom]: [
    IRoom,
    React.Dispatch<React.SetStateAction<IRoom>>
  ] = useState<IRoom>({
    roomId: "",
    roomName: "",
    srs: { streamurl: "" },
    coverImg: "",
  });

  async function getLiveRoomList() {
    try {
      const res = await fetchLiveList();
      if (res.code === 200) {
        const list
          = res.data.rows.map((item: any) => {
            return {
              roomId: item.roomId,
              roomName: JSON.parse(item.data).data.roomName,
              coverImg: JSON.parse(item.data).data.coverImg,
              srs: JSON.parse(item.data).data.srs,
            };
            setLiveRoomList(list)
          });
        if (res.data.count) {
          const item = res.data.rows[0].data;
          const currentRoom
            = {
            roomId: res.data.rows[0].roomId,
            roomName: JSON.parse(item).data.roomName,
            coverImg: JSON.parse(item).data.coverImg,
            srs: JSON.parse(item).data.srs,
          };
          setCurrenRoom(currentRoom)
        }
      }
    } catch (error) {
      console.log(error);
    }
  }

  function joinRoom() {
    if (currentLiveRoom.srs) {
      router.push({
        pathname: 'srs-webrtc-pull',
        query: { roomId: currentLiveRoom.roomId },
      });
      return
    } 
    router.push({
      pathname: 'webrtc-pull',
        query: { roomId: currentLiveRoom.roomId },
    });
  }


  /**
   * 初始化函数
   */
  function init() {
    getLiveRoomList();
  }

  init()

  return (
    <div className="home-wrap">
      <Left currentLiveRoom={currentLiveRoom} liveRoomList={liveRoomList} />
      <Right
        options={{ currentLiveRoom, liveRoomList, setCurrenRoom }}
        currentLiveRoom={currentLiveRoom}
        liveRoomList={liveRoomList}
        setCurrenRoom={setCurrenRoom}
      />
    </div>
  );
};

/**
 * 左侧元素
 * @param param0
 * @returns
 */
function Left({
  currentLiveRoom,
  liveRoomList,
}: {
  currentLiveRoom: IRoom;
  liveRoomList: IRoom[];
}) {
  return (
    <div
      className="left"
      style={{ backgroundImage: `url(${currentLiveRoom?.coverImg})` }}
    >
      <video src=""></video>

      {liveRoomList.length ? (
        <div className="btn" onClick={joinRoom}>
          进入直播
        </div>
      ) : (
        ""
      )}
    </div>
  );
}

/**
 * 右侧元素
 * @param param0
 * @returns
 */
function Right(props: any) {
  const { liveRoomList, currentLiveRoom } = props.options;
  return liveRoomList.length ? (
    liveRoomList.map((item: any) => {
      return (
        <div
          className={`item ${item.roomId === currentLiveRoom?.roomId ? "active" : ""
            }`}
          style={{ backgroundImage: `url(${item.coverImg})` }}
          onClick={() => props.setCurrenRoom(item)}
        >
          <div className="border" style={{ opacity: item.roomId === currentLiveRoom?.roomId ? 1 : 0 }}></div>

          {item.roomId === currentLiveRoom.roomId ? (
            <div className="triangle"></div>
          ) : (
            <div className="txt">{item.roomName}</div>
          )}
        </div>
      );
    })
  ) : (
    <div className="none">当前没有在线的直播间</div>
  );
}

export default Home;
